<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成长报告 - InterviewAI</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 动态背景 -->
    <div class="bg-animation">
        <div class="floating-shape"></div>
        <div class="floating-shape"></div>
        <div class="floating-shape"></div>
    </div>

    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="navbar-container">
            <a href="index.html" class="navbar-brand">InterviewAI</a>
            
            <ul class="navbar-nav">
                <li><a href="index.html">控制台</a></li>
                <li><a href="resume.html">简历优化</a></li>
                <li><a href="interview.html">面试模拟</a></li>
                <li><a href="profile.html" class="active">成长报告</a></li>
            </ul>
            
            <div class="navbar-actions">
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="搜索功能、模板...">
                    <span class="search-icon">🔍</span>
                </div>
                
                <button class="theme-toggle" onclick="toggleTheme()" title="切换主题">
                    <span class="icon">🌙</span>
                </button>
                
                <button class="icon-btn">
                    <span>🔔</span>
                    <span class="notification-badge"></span>
                </button>
                
                <div class="user-avatar">A</div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="main-content">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">成长报告</h1>
            <p class="page-subtitle">数据分析 · 能力提升 · 持续进步</p>
            <div class="page-meta">会员状态: <span class="info-badge success">高级会员</span></div>
        </div>

        <!-- 基本信息 -->
        <div class="info-card">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
                <h2 class="card-title" style="margin-bottom: 0;">基本信息</h2>
                <button class="btn btn-text" data-action="edit" onclick="showMessage('编辑功能开发中', 'info')">编辑</button>
            </div>
            
            <div style="display: flex; align-items: center; gap: 24px; margin-bottom: 16px;">
                <div style="width: 80px; height: 80px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600;">
                    A
                </div>
                <div>
                    <h3 style="margin: 0 0 8px 0; font-size: 20px; color: var(--text-primary);">张三</h3>
                    <div style="color: var(--text-secondary); margin-bottom: 4px;">Java开发工程师</div>
                    <div style="color: var(--text-muted);">上次登录: 2024-07-01 14:30</div>
                </div>
            </div>

            <div class="grid grid-2">
                <div class="info-row">
                    <span class="info-label">📧 邮箱</span>
                    <span class="info-value">zhang@example.com</span>
                </div>
                
                <div class="info-row">
                    <span class="info-label">📱 手机号</span>
                    <span class="info-value">138****8888</span>
                </div>
                
                <div class="info-row">
                    <span class="info-label">🎂 注册时间</span>
                    <span class="info-value">2024-01-15</span>
                </div>
                
                <div class="info-row">
                    <span class="info-label">🌍 所在地区</span>
                    <span class="info-value">北京市朝阳区</span>
                </div>
            </div>
        </div>

        <!-- 会员状态 -->
        <div class="info-card">
            <div class="card-header">
                <h2 class="card-title">会员状态</h2>
                <div style="display: flex; gap: 8px;">
                    <button class="btn btn-primary" onclick="showMessage('续费功能开发中', 'info')">续费</button>
                    <button class="btn btn-secondary" onclick="showMessage('升级功能开发中', 'info')">升级</button>
                </div>
            </div>

            <div style="background: linear-gradient(135deg, #3B82F6, #1D4ED8); padding: 24px; border-radius: 8px; color: white; margin-bottom: 16px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
                    <div>
                        <div style="font-size: 18px; font-weight: 600; margin-bottom: 4px;">高级会员 💎</div>
                        <div style="opacity: 0.9;">享受全功能权益</div>
                    </div>
                    <div style="text-align: right;">
                        <div style="font-size: 14px; opacity: 0.9;">到期时间</div>
                        <div style="font-size: 16px; font-weight: 600;">2024-08-15</div>
                    </div>
                </div>
                
                <div style="background: rgba(255,255,255,0.2); border-radius: 6px; padding: 12px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                        <span>会员时长</span>
                        <span>还剩45天</span>
                    </div>
                    <div style="width: 100%; height: 6px; background: rgba(255,255,255,0.3); border-radius: 3px;">
                        <div style="width: 60%; height: 100%; background: white; border-radius: 3px;"></div>
                    </div>
                </div>
            </div>

            <div class="grid grid-3">
                <div style="text-align: center; padding: 16px; background: var(--gray-50); border-radius: 6px;">
                    <div style="font-size: 20px; font-weight: 600; color: var(--primary-color); margin-bottom: 4px;">8/50</div>
                    <div style="color: var(--gray-500); font-size: 14px;">简历优化</div>
                </div>
                
                <div style="text-align: center; padding: 16px; background: var(--gray-50); border-radius: 6px;">
                    <div style="font-size: 20px; font-weight: 600; color: var(--success-color); margin-bottom: 4px;">无限制</div>
                    <div style="color: var(--gray-500); font-size: 14px;">面试练习</div>
                </div>
                
                <div style="text-align: center; padding: 16px; background: var(--gray-50); border-radius: 6px;">
                    <div style="font-size: 20px; font-weight: 600; color: var(--warning-color); margin-bottom: 4px;">3/30</div>
                    <div style="color: var(--gray-500); font-size: 14px;">PDF导出</div>
                </div>
            </div>
        </div>

        <!-- 使用统计 -->
        <div class="info-card">
            <div class="card-header">
                <h2 class="card-title">使用统计</h2>
                <div class="info-badge">本月数据</div>
            </div>

            <div class="grid grid-2" style="margin-bottom: 24px;">
                <div class="stats-card">
                    <div class="stats-number">8</div>
                    <div class="stats-label">简历优化次数</div>
                    <div class="stats-progress">比上月 +25%</div>
                </div>
                
                <div class="stats-card">
                    <div class="stats-number">5</div>
                    <div class="stats-label">面试练习次数</div>
                    <div class="stats-progress">比上月 +67%</div>
                </div>
                
                <div class="stats-card">
                    <div class="stats-number">91</div>
                    <div class="stats-label">最高面试得分</div>
                    <div class="stats-progress">历史最佳</div>
                </div>
                
                <div class="stats-card">
                    <div class="stats-number">89</div>
                    <div class="stats-label">最佳简历评分</div>
                    <div class="stats-progress">A+ 评级</div>
                </div>
            </div>

            <!-- 成长趋势图表区域 -->
            <div style="background: var(--gray-50); border-radius: 6px; padding: 24px; text-align: center;">
                <div style="color: var(--gray-500); margin-bottom: 16px;">📈 成长趋势图表</div>
                <div style="height: 200px; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--gray-200); border-radius: 6px;">
                    <div style="color: var(--gray-500);">图表组件开发中...</div>
                </div>
            </div>
        </div>

        <!-- 历史记录 -->
        <div class="info-card">
            <div class="card-header">
                <h2 class="card-title">最近记录</h2>
                <button class="btn btn-text">查看全部</button>
            </div>

            <div style="margin-bottom: 16px;">
                <div style="display: flex; gap: 8px; margin-bottom: 16px;">
                    <button class="btn btn-text active" style="background: var(--primary-color); color: white;">全部</button>
                    <button class="btn btn-text">简历优化</button>
                    <button class="btn btn-text">面试练习</button>
                    <button class="btn btn-text">PDF导出</button>
                </div>
            </div>

            <ul class="record-list">
                <li class="record-item">
                    <div style="display: flex; align-items: center; gap: 12px;">
                        <div style="width: 40px; height: 40px; border-radius: 6px; background: var(--success-color); color: white; display: flex; align-items: center; justify-content: center;">🎯</div>
                        <div>
                            <div class="record-title">Java开发面试模拟</div>
                            <div class="record-meta">2024-07-01 14:30 | 技术面试 | 用时25分钟</div>
                        </div>
                    </div>
                    <div class="record-score">91分</div>
                </li>
                
                <li class="record-item">
                    <div style="display: flex; align-items: center; gap: 12px;">
                        <div style="width: 40px; height: 40px; border-radius: 6px; background: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center;">📝</div>
                        <div>
                            <div class="record-title">后端开发简历优化</div>
                            <div class="record-meta">2024-06-30 16:45 | AI分析 | 优化建议12条</div>
                        </div>
                    </div>
                    <div class="record-score" style="background-color: var(--primary-color);">89分</div>
                </li>
                
                <li class="record-item">
                    <div style="display: flex; align-items: center; gap: 12px;">
                        <div style="width: 40px; height: 40px; border-radius: 6px; background: var(--warning-color); color: white; display: flex; align-items: center; justify-content: center;">📄</div>
                        <div>
                            <div class="record-title">简历PDF导出</div>
                            <div class="record-meta">2024-06-29 10:20 | 现代简约模板</div>
                        </div>
                    </div>
                    <div class="record-score" style="background-color: var(--success-color);">已完成</div>
                </li>
                
                <li class="record-item">
                    <div style="display: flex; align-items: center; gap: 12px;">
                        <div style="width: 40px; height: 40px; border-radius: 6px; background: var(--success-color); color: white; display: flex; align-items: center; justify-content: center;">🎯</div>
                        <div>
                            <div class="record-title">产品经理面试练习</div>
                            <div class="record-meta">2024-06-28 19:15 | 综合面试 | 用时35分钟</div>
                        </div>
                    </div>
                    <div class="record-score">85分</div>
                </li>
                
                <li class="record-item">
                    <div style="display: flex; align-items: center; gap: 12px;">
                        <div style="width: 40px; height: 40px; border-radius: 6px; background: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center;">📝</div>
                        <div>
                            <div class="record-title">项目经验优化</div>
                            <div class="record-meta">2024-06-27 14:30 | AI建议 | 优化8个要点</div>
                        </div>
                    </div>
                    <div class="record-score" style="background-color: var(--primary-color);">82分</div>
                </li>
            </ul>
        </div>

        <!-- 成就徽章 -->
        <div class="info-card">
            <div class="card-header">
                <h2 class="card-title">成就徽章</h2>
                <div class="info-badge">已获得 6/15</div>
            </div>

            <div class="grid grid-4">
                <div style="text-align: center; padding: 16px; background: var(--gray-50); border-radius: 6px; border: 2px solid var(--success-color);">
                    <div style="font-size: 32px; margin-bottom: 8px;">🏆</div>
                    <div style="font-weight: 600; margin-bottom: 4px;">面试达人</div>
                    <div style="color: var(--gray-500); font-size: 12px;">完成10次面试</div>
                </div>
                
                <div style="text-align: center; padding: 16px; background: var(--gray-50); border-radius: 6px; border: 2px solid var(--success-color);">
                    <div style="font-size: 32px; margin-bottom: 8px;">⭐</div>
                    <div style="font-weight: 600; margin-bottom: 4px;">优秀表现</div>
                    <div style="color: var(--gray-500); font-size: 12px;">面试得分90+</div>
                </div>
                
                <div style="text-align: center; padding: 16px; background: var(--gray-50); border-radius: 6px; border: 2px solid var(--success-color);">
                    <div style="font-size: 32px; margin-bottom: 8px;">📝</div>
                    <div style="font-weight: 600; margin-bottom: 4px;">简历专家</div>
                    <div style="color: var(--gray-500); font-size: 12px;">优化20份简历</div>
                </div>
                
                <div style="text-align: center; padding: 16px; background: var(--gray-50); border-radius: 6px; border: 2px dashed var(--gray-200);">
                    <div style="font-size: 32px; margin-bottom: 8px; opacity: 0.3;">🎯</div>
                    <div style="font-weight: 600; margin-bottom: 4px; color: var(--gray-400);">精准求职</div>
                    <div style="color: var(--gray-400); font-size: 12px;">投递成功率80%</div>
                </div>
            </div>
        </div>

        <!-- 快捷操作 -->
        <div class="info-card">
            <div class="card-header">
                <h2 class="card-title">快捷操作</h2>
            </div>

            <div class="grid grid-3">
                <button class="action-card" onclick="window.location.href='resume.html'">
                    <div class="action-icon">📝</div>
                    <div class="action-title">编辑简历</div>
                    <div class="action-desc">继续优化简历内容</div>
                </button>
                
                <button class="action-card" onclick="window.location.href='interview.html'">
                    <div class="action-icon">🎯</div>
                    <div class="action-title">开始面试</div>
                    <div class="action-desc">开始新的面试练习</div>
                </button>
                
                <button class="action-card" onclick="showMessage('下载记录功能开发中', 'info')">
                    <div class="action-icon">📊</div>
                    <div class="action-title">导出报告</div>
                    <div class="action-desc">下载详细分析报告</div>
                </button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
    <script>
        // 标签页切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('.btn-text');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 移除所有active类
                    tabs.forEach(t => {
                        t.classList.remove('active');
                        t.style.background = '';
                        t.style.color = '';
                    });
                    
                    // 添加active类到当前标签
                    this.classList.add('active');
                    this.style.background = 'var(--primary-color)';
                    this.style.color = 'white';
                    
                    // 这里可以添加筛选记录的逻辑
                    console.log('切换到:', this.textContent);
                });
            });
        });
    </script>
</body>
</html> 